<script setup lang="ts">
import { Table, Popconfirm, Pagination, Space } from 'ant-design-vue'
import SearchForm from '@/components/SearchForm.vue'
import { EventLogType } from '@/types/event'
import { useTable } from '@/hooks'
import { FormOption } from '@/types/form';
const { scroll, loading, dataSource, pagination, handleSearch, handleDelete } = useTable<EventLogType>({
  name: '事件',
  api: 'eventLog'
})
const columns = [
  {
    title: '事件名',
    dataIndex: 'eventName'
  },
  {
    title: '模块',
    dataIndex: 'eventModule'
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime'
  },
  {
    title: '操作',
    dataIndex: 'action'
  }
]
const formOptions: FormOption[] = [
  {
    field: 'eventName',
    name: '事件名',
    type: 'input',
    search: true,
    required: true
  },
  {
    field: 'moduleName',
    name: '模块',
    type: 'input',
    search: true,
    required: true
  },
  {
    field: 'createdTime',
    name: '创建时间',
    type: 'input',
    search: false
  },
  {
    field: 'remark',
    name: '备注',
    type: 'textarea'
  }
]
</script>

<template>
  <div class="px-2">
    <div class="py-2 px-2">
      <h2 class="text-xl font-bold">事件管理</h2>
      <SearchForm
        :searchOptions="formOptions"
        :handle-search="handleSearch"
      />
    </div>
    <Table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="loading"
      rowKey="id"
      :scroll="scroll"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'action'">
          <Space>
            <Popconfirm
              v-if="dataSource.length"
              title="确认删除吗?"
              @confirm="handleDelete(record.id)"
            >
              <a>删除</a>
            </Popconfirm>
          </Space>
        </template>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </Table>
    <div class="flex mt-4 justify-end">
      <Pagination
        class="py-2 px-2"
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        show-quick-jumper
        :show-total="(total) => `共 ${total} 条`"
        show-size-changer
        :total="pagination.total"
        @change="pagination.onChange"
      />
    </div>
  </div>
</template>
